import React, { Component } from 'react';
import { connect } from 'dva';
import { Modal, Form, Input, Tree,TreeSelect } from 'antd';
const FormItem = Form.Item;
const TreeNode = Tree.TreeNode

class RolePermissionModal extends Component {
  constructor(props) {
    super(props);
   
  }

   okHandler = () => {
    const { onOk } = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {        
        onOk(values);
      }
    });
  };

  render() {
    const { children,dispatch,permissions,rolepermissions, item,title } = this.props;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };
  const loop = data => data.map((item) => {
    if (item.children) {
      return <TreeNode title={item.name} key={item.id_+""}>{loop(item.children)}</TreeNode>;
    }
    return <TreeNode title={item.name} key={item.id_+"" } />;
  });

  //选择权限
  const handleSelect=(permission)  =>{
    dispatch({
      type: 'role/changePermissions',
      payload: {rolepermissions:permission},
    })
  }

  const treeData = (i) => {
    return i.map( d => {
      d.label = d.name;
      d.key = d.id_+'';
      d.value = d.id_+'';
      d.children = d.children && d.children.length > 0 ? treeData(d.children) : [];
      return d;
    })
  }


    return (
        <span>
            <Modal
                confirmLoading={false}
                title={title}
                visible={this.props.visible}
                onOk={this.okHandler}
                onCancel={this.props.onCancel}
                key={this.props.key}
            >
              <Form layout='horizontal' onSubmit={this.okHandler}>                
                <FormItem>
                  {getFieldDecorator('id',{initialValue:item.id})(
                    <Input type="hidden"/>
                  )}
                </FormItem>

                <FormItem
                  label="角色名称："
                  {...formItemLayout}
                  hasFeedback
                >
                 {getFieldDecorator('name',{initialValue:item.name})(
                   <Input disabled={true} type="text" />
                  )}
                  
                </FormItem>

                <FormItem
                    label="权限："
                    hasFeedback
                    {...formItemLayout}
                  >
                  <div style={{height:500,overflow:'auto'}}>       
                    {getFieldDecorator('permission',
                        {initialValue:rolepermissions})(           
                      <Tree 
                        checkable
                        onCheck={handleSelect.bind(this)}
                        defaultCheckedKeys={rolepermissions}
                        defaultExpandedKeys={rolepermissions}
                      >
                      {loop(permissions)}
                      </Tree>
                       )}
                  </div>
                  </FormItem>
              
              </Form>
            </Modal> 
        </span>
    );
  }
}

export default Form.create()(RolePermissionModal);